import React,{Component,Fragment} from 'react'
import BaseForm from './../../components/BaseForm'
import axios from './../../axios'
import {Card,Button,Icon,Form,Modal,Input,Radio,Select,DatePicker,message} from 'antd'
import ETable from '../../components/ETable';
import Utils from './../../utils/utils'
import { isMoment } from 'moment';
import moment from 'moment'

const FormItem = Form.Item
const RadioGroup = Radio.Group
const TextArea = Input.TextArea
const Option = Select.Option
export default class User extends Component {
    state = {
        page:1,
        userInfo:'',
        isVisible:false
    }
    params = {
        page:1
    }
    componentWillMount() {
        this.requestList()
    }
    requestList = () => {
        axios.requestList(this,'/user/list',this.params,true)
    }
    formList = [
        {
            type:'INPUT',
            field:'username',
            label:'用户名',
            placeholder:'请输入用户名称',
            initialValue:'',
            width:150
        },
        {
            type:'INPUT',
            field:'phone',
            label:'用户手机号',
            placeholder:'请输入用户手机号',
            initialValue:'',
            width:150
        },
        {
            type:'DATE',
            field:'fire_time',
            label:'请选择入职日期',
            placeholder:'请输入日期',
            initialValue:'',
            width:150
        }
    ]
    handleQuery = (data) => {
        this.params = data
        this.requestList()
    }
    operate = (type) => {
        let selectedItem = this.state.selectedItem
        if(type === 'create') {
            this.setState({
                type:'create',
                userInfo:'',
                title:'创建员工',
                isVisible:true
            })
        }else if(type === 'edit' || type === 'detail') {
            //
            if(!selectedItem) {
                Modal.info({
                    title:'温馨提示',
                    content:'请选择一个用户',
                    okText:'关闭'
                })
                return
            }else {
                this.setState({
                    type:type==='edit'?'edit':'detail',
                    title:type==='edit'?'编辑用户':'查看详情',
                    userInfo:selectedItem,
                    isVisible:true
                })
            }
        }else {
            if(!selectedItem) {
                Modal.info({
                    title:'温馨提示',
                    content:'请选择一个用户',
                    okText:'关闭'
                })
                return
            }else {
                const _this = this;
                Modal.confirm({
                    title:'确定要删除此用户吗？',
                    okText:'确认',
                    onOk(){
                        axios.ajax({
                            url:'/user/delete',
                            data:{
                                params:{
                                    id:selectedItem.id
                                }
                            }
                        }).then(res => {
                            if(res.code === 0) {
                                message.info('删除员工成功')
                                _this.setState({
                                    isVisible:false,
                                    type:''
                                })
                                _this.requestList()
                            }
                        })
                    }
                })
            }
        }
    }
    //创建员工
    handleSubmit = () => {
        let type = this.state.type
        let data = this.form.props.form.getFieldsValue()
        axios.ajax({
            url:type==='create'?'/user/add':'/user/edit',
            data
        }).then(res => {
            if(res.code === 0) {
                type==='create'?message.info('创建员工成功'):message.info('编辑员工成功')
                this.setState({
                    isVisible:false,
                    userInfo:'',
                    type:''
                })
                this.requestList()
            }
        })
    }
    render(){
        const columns = [
            {
                title:'id',
                dataIndex:'id'
            },
            {
                title:'用户名',
                dataIndex:'username'
            },
            {
                title:'性别',
                dataIndex:'sex',
                render(sex){
                    return sex === 1 ?'男':'女'
                }
            },
            {
                title:'状态',
                dataIndex:'state',
                render(state){
                    let config  = {
                        1:'咸鱼一条',
                        2:'风华浪子',
                        3:'北大才子',
                        4:'百度FE',
                        5:'创业者'
                    }
                    return config[state];
                }
            },
            {
                title:'爱好',
                dataIndex:'interest',
                render(interest) {
                    let config = {
                        '1': '游泳',
                        '2': '打篮球',
                        '3': '踢足球',
                        '4': '跑步',
                        '5': '爬山',
                        '6': '骑行',
                        '7': '桌球',
                        '8': '麦霸'
                    }
                    return config[interest];
                }
            },
            {
                title:'是否已婚',
                dataIndex:'isMarried',
                render(isMarried) {
                    return isMarried===1? '已婚':'未婚'
                }
            },
            {
                title:'生日',
                dataIndex:'birthday'
            },
            {
                title:'联系地址',
                dataIndex:'address'
            },
            {
                title:'早起时间',
                dataIndex:'time'
            }
        ]

        let footer ={}
        //员工详情不需要确认按钮
        if(this.state.type === 'detail') {
            footer = {
                footer:null
            }
        }
        return (
            <Fragment>
                <Card>
                    <BaseForm formList={this.formList} handleQuery={this.handleQuery}/>
                </Card>
                <Card>
                    <Button type="primary" icon='plus' onClick={() => this.operate('create')}>创建员工</Button>
                    <Button type="primary" icon='edit' onClick={() => this.operate('edit')}>编辑员工</Button>
                    <Button type="primary"  onClick={() => this.operate('detail')}>员工详情</Button>
                    <Button type="primary" icon='delete' onClick={() => this.operate('delete')}>删除员工</Button>
                </Card>
                <div className="content-wrap">
                    <ETable
                        updateSelectedItem={Utils.updateSelectedItem.bind(this)}
                        selectedRowKeys={this.state.selectedRowKeys}
                        columns = {columns}
                        dataSource = {this.state.dataSource}
                        pagination = {this.state.pagination}
                    />
                </div>
                <Modal
                    title={this.state.title}
                    visible={this.state.isVisible}
                    onCancel={() => {
                        this.setState({
                            isVisible:false,
                            userInfo:''
                        })
                    }}
                    onOk={this.handleSubmit}
                    {...footer}
                >
                    <UserForm type={this.state.type} userInfo={this.state.userInfo} wrappedComponentRef={(comp) => this.form = comp}/>         
                </Modal>
            </Fragment>
        )
    }
}

class UserForm extends Component{
    getState = (state)=>{
        return {
            1:'咸鱼一条',
            2:'风华浪子',
            3:'北大才子一枚',
            4:'百度FE',
            5:'创业者'
        }[state]
    }
    
    render() {
        const { getFieldDecorator } = this.props.form
        //创建员工和编辑员工都可以赋值，创建员工赋的是空值
        const userInfo = this.props.userInfo || {}
        const type = this.props.type
        const FormItemLayout = {
            labelCol:{
                span:5
            },
            wrapperCol:{
                span:19
            }
        }
        return (
            <Form layout="horizontal">
                <FormItem label="姓名" {...FormItemLayout}>
                    {
                        userInfo && type=='detail'?userInfo.username:
                        getFieldDecorator('username',{
                            initialValue:userInfo.username
                        })(
                            <Input placeholder="请输入姓名" />
                        )
                    }
                </FormItem>
                <FormItem label="性别" {...FormItemLayout}>
                    {
                        userInfo && type=='detail'?(userInfo.sex===1?'男':'女'):
                        getFieldDecorator('sex',{
                            initialValue:userInfo.sex
                        })(
                            <RadioGroup>
                                <Radio value={1}>男</Radio>
                                <Radio value={2}>女</Radio>
                            </RadioGroup>  
                        )
                    }
                </FormItem>
                <FormItem label="状态" {...FormItemLayout}>
                    {
                        userInfo && type=='detail'?this.getState(userInfo.state):
                        getFieldDecorator('state',{
                            initialValue:userInfo.state
                        })(
                            <Select>
                                <Option value={1}>咸鱼一条</Option>
                                <Option value={2}>风华浪子</Option>
                                <Option value={3}>北大才子</Option>
                                <Option value={4}>百度FE</Option>
                                <Option value={5}>创业者</Option>
                            </Select> 
                        )
                    }
                </FormItem>
                <FormItem label="生日" {...FormItemLayout}>
                    {
                        userInfo && type=='detail'?userInfo.birthday:
                        getFieldDecorator('birthday',{
                            initialValue:moment(userInfo.birthday)
                        })(
                            <DatePicker placeholder="请输入生日日期"/>
                        )
                    }
                </FormItem>
                <FormItem label="联系地址" {...FormItemLayout}>
                    {
                        userInfo && type=='detail'?userInfo.address:
                        getFieldDecorator('address',{
                            initialValue:userInfo.address
                        })(
                            <TextArea rows={3} placeholder="请输入联系地址" />
                        )
                    }
                </FormItem>
            </Form>
        )
    }
}

UserForm = Form.create({})(UserForm)